<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Sketch from "./index.js";
const stage = ref(null);
let progress = ref(0)
let isLoaded = ref(false)
let sketch;

onMounted(() => {
  sketch = new Sketch({
    el: stage.value,
    evts: {
      onProgress: (num) => {
        progress.value = num
      },
      onLoad: () => {
        isLoaded.value = true;
      }
    }
  });
});

onUnmounted(() => {
  sketch.destroy();
  sketch = null;
});
</script>

<template>
  <div class="stage" ref="stage"></div>
  <div class="loading" v-show="!isLoaded">{{ progress }}%</div>
</template>

<style lang="scss" scoped>
.stage {
  width: 100%;
  height: 100vh;
  background-color: black;
  display: block;
  overflow: hidden;
  overscroll-behavior: none;
}

.loading {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 88;
  font-family: 'RubikVinyl';
  font-size: 8vmin;
  display: flex;
  color: rgb(253,190,0);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-image: repeating-radial-gradient(circle at center center, transparent 0px, transparent 8px,
      rgba(255, 255, 255, 0.05) 8px, rgba(255, 255, 255, 0.05) 11px, transparent 11px, transparent 17px,
      rgba(255, 255, 255, 0.05) 17px, rgba(255, 255, 255, 0.05) 25px, transparent 25px, transparent 38px,
      rgba(255, 255, 255, 0.05) 38px, rgba(255, 255, 255, 0.05) 42px),
    repeating-radial-gradient(circle at center center, rgb(170, 0, 0) 0px, rgb(170, 0, 0) 11px, rgb(170, 0, 0) 11px, rgb(170, 0, 0) 19px, rgb(170, 0, 0) 19px, rgb(170, 0, 0) 24px, rgb(170, 0, 0) 24px, rgb(170, 0, 0) 33px, rgb(170, 0, 0) 33px, rgb(170, 0, 0) 44px, rgb(170, 0, 0) 44px, rgb(170, 0, 0) 46px);
  background-size: 60px 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
